<template>
  <div :style="{ width: '100%', height: '40px' }" :id="chart_id"></div>
</template>
<script>
import * as echarts from 'echarts'
// import { indexOf } from 'lodash/array'

export default {
  data() {
    return {
      chart_id: 'chart-' + Date.now() + Math.ceil(Math.random() * 10000),
      myChart: null,
    }
  },
  props: {
    da: {
      type: Array,
      default: () => [],
    },
    selectStatus: Array,
    beginTime: String,
    endTime: String,
    timeSliderValue: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
    this.$nextTick(() => this.initChart())

    // window.addEventListener('resize', () => {
    //   this.myChart?.resize()
    // })
  },
  // beforeDestroy() {
  //   window.removeEventListener('resize', () => this.myChart?.resize())
  // },
  methods: {
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(document.getElementById(this.chart_id))
      this.setOption()
    },
    setOption(need_clear = true) {
      if (!this.myChart) {
        return this.initChart()
      }
      if (need_clear) {
        this.myChart.clear()
      }
      let data = this.da?.map((vo, idx) => {
        let color = '#3DBA0F' //默认为正常
        // switch (vo.state) {
        //   case 1:
        //     color = '#ee655c'
        //     break
        //   case 2:
        //     color = '#f8d771'
        //     break
        //   case 3:
        //     color = '#f3aa7c'
        //     break

        //   default:
        //     break
        // }
        // if (indexOf(this.selectStatus, vo.state) < 0) {
        //   color = '#999'
        // }
        return {
          value: [vo.k0004, 1, idx, { ...vo }],
          itemStyle: {
            // color: vo.color,
            color,
          },
        }
      })
      let options = {
        dataZoom: [
          {
            show: false,
            throttle: 0,
          },
        ],
        legend: {
          show: false,
          left: 0,
          itemWidth: 10,
        },
        xAxis: {
          type: 'time',
          show: false,
          min: this.beginTime,
          max: this.endTime,
        },
        yAxis: {
          show: false,
        },
        series: [
          {
            type: 'scatter',
            symbol: 'rect',
            // symbolSize: [6,100], 默认
            symbolSize: [4, 100],
            colorBy: 'data',
            data,
          },
        ],
      }
      // 绘制图表
      this.myChart.setOption(options)
      // 点击跳转
      this.myChart.on('click', function({ data }) {
        const value = data?.value?.[3]
        window.open(
          '#/home/detail?k0014=' + value.k0014 + '&k0010=' + value.k0010,
          '_blank'
        )
      })
      // 为了避免内存泄漏，可以在组件销毁前销毁图表实例
      this.$once('hook:beforeDestroy', () => {
        this.myChart.dispose()
      })
    },
  },
  watch: {
    // 颜色改变
    selectStatus() {
      this.setOption(false)
    },

    timeSliderValue: {
      handler() {
        this.$nextTick(() => {
          this.myChart?.dispatchAction({
            type: 'dataZoom',
            // 开始位置的数值
            start: this.timeSliderValue[0],
            // 结束位置的数值
            end: this.timeSliderValue[1],
          })
        })
      },
      // deep: true,
      // immediate: true,
    },
    da: {
      handler() {
        this.setOption(false)
      },
    },
  },
}
</script>
